/* eslint-disable react/prop-types */
import React, { useState } from "react"

function Header(props) {
  console.log(props);
  const fn = () => {
    // 这句话就是子向父通信的核心操作， 子组件想要修改value数据，但是value数据是父组件的，子组件肯定不能修改
    // 想了一个办法，将父组件修改自己value数据的方法setValue，传给子组件，子组件调用父组件的方法，达到父组件自己修改自己数据的目的
    props.setValue(props.value + 1)
  }
  return (
    <>
      <div>我是子组件----{props.value}</div>
      {/* 数据都是单向数据流，子组件想要修改父组件的数据，只能通过父组件传递方法尽量，然后让父组件自己修改自己的数据 */}
      <button onClick={fn}>子组件想要修改父组件的value数据</button>
    </>
  )
}

// 类组件 演示 子向父通信
class Footer extends React.Component {
  constructor() {
    super()  // constructor构造函数要么就不写，如果写了就一定要写super
    this.fn2 = () => {
      console.log(123);
    }
  }
  fn = () => {
    // 下面是通过调用父组件的方法，去修改父组件自己的数据
    this.props.setValue(this.props.value - 1)
  }
  render() {
    console.log(this.props);
    return (
      <>
        <h3>我是子组件---{this.props.value}</h3>
        <button onClick={this.fn}>我是类组件的子组件 想要修改父组件数据</button>
        <button onClick={this.fn2}>测试另一个函数</button>
      </>
    )
  }
}

function App() {
  const [value, setValue] = useState(100)
  return (
    <>
      {/* 父向子传值 --- value={value} */}
      <Header value={value} setValue={setValue}/>
      {/*  */}
      <Footer value={value} setValue={setValue} />
    </>
  )
}

export default App
